<template>
  <div class="details container mt-3">
    <div class="row">
      <!--左侧内容-->
      <div class="col-lg-9 col-md-12">
        <div class="article panel">
          <div class="header">
            <div class="title">
              <span v-if="contents.top" class="put_top">置顶</span>
              {{ contents.title }}
            </div>
            <div class="info">
              <span>发布于{{ time }}</span>
              <span v-if="contents">作者 {{contents.author.loginname }}</span>
              <span>{{contents.visit_count }}次浏览</span>
             
            </div>
          </div>
          <van-divider />
          <div class="content" v-html="contents.content"></div>
        </div>
        <div class="reply_area">
          <div class="header">{{contents.reply_count}} 回复</div>
          <van-list
>
  <van-cell v-for="(item,i) in contents.replies" :key="item.id"  >
    <div class="author_content">
      <img :src="item.author.avatar_url"  width="30px" height="30px" :alt="item.author.loginname">
      <span style="color:#08c;">{{item.author.loginname}}</span>
      <span>{{i+1}}楼</span>
      <span>{{replt_time(item.create_at)}}</span>
      <span class="goodcount"><van-icon name="good-job-o" size="20" style="
       bottom:-3px;margin-right:3px
      "/>{{item.ups.length}}</span>
    </div>
    <div class="reply_content" v-html="item.content">

    </div>
  </van-cell>
</van-list>
        </div>
      </div>

      <!--右侧内容-->
      <RightArea class="col-lg-3 d-none d-md-none d-sm-none d-lg-block" />
    </div>
  </div>
</template>
<script>
import $ from "../../../node_modules/jquery/dist/jquery";
import RightArea from "../index/RightArea";
import { setTime } from "../../util/time";
import { ImagePreview } from "vant";
export default {
  data() {
    return {
      contents: "",
      images: []
    };
  },
  computed: {
    time() {
      return setTime(this.contents.create_at);
    },
    replt_time(){
     return function(time){
 return setTime(time);
     }
    }
   
  },
  components: {
    RightArea
  },
  created() {
    this.getdata();
  },

  methods: {
    getdata() {
      console.log(1);
      let id = this.$route.params.id;
      this.$http1({ url: `/topic/${id}` }).then(res => {
        this.contents = res.data.data;
        let content = res.data.data.content;
        this.$nextTick(() => {
          let imgs = $(".content").find("img");
          for (let i = 0; i < imgs.length; i++) {
            // console.log(imgs.eq(i).attr("src"));
            this.images.push(imgs.eq(i).attr("src"));
            imgs.eq(i).css({
              width: "100%"
            });
            imgs.eq(i).click(() => {
              ImagePreview({
                images: this.images,
                startPosition: i,
                onClose() {
                  // do something
                }
              });
            });
          }
        });
      });
    }
  }
};
</script>
 <style scoped>
.panel {
  margin-bottom: 13px;
}
.article {
  background: #fff;
}
 .header {
  padding: 10px;
}
.article .header .title {
  font-size: 22px;
  font-weight: 700;
  margin: 8px 0;
  display: inline-block;
  vertical-align: bottom;
  width: 75%;
  line-height: 120%;
}
.put_top {
  background: #80bd01;
  padding: 2px 4px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  color: #fff;
  font-size: 12px;
}
.info span {
  font-size: 12px;
  color: #838383;
  display: inline-block;
  margin: 0 3px;
}

.info span::before {
  content: "•";
  display: inline-block;
  margin-right: 2px;
}
.content {
  padding: 10px;
  width: 100%;
}
.author_content{
  position: relative;
}
.author_content span{
display:inline-block;
margin-left:10px;
}
.goodcount{
  position: absolute;
  right: 10px;
 
}
.reply_content{
  padding-top: 5px
}
</style>
